import { getCurrentInstance, defineComponent, reactive, ref, ComponentInternalInstance } from "vue";
import DialogBox from "@/components/DialogBox";
import { ElForm, ElFormItem, ElInput, ElSwitch, ElMessage, ElRadioButton, ElRadioGroup } from "element-plus";
// import TreeFilter from "@/components/TreeFilter/index.vue";
import { addApp, getInfo, editApp } from "@/api/modules/basic/api";
import { ResultEnum } from "@/enums/httpEnum";
import { deepClone } from "@/utils/util";
const Form = defineComponent({
	props: {
		getList: Function
	},
	setup(props, { expose }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const data = reactive({
			boxShow: false,
			checkedList: [],
			menusStrictly: true,
			formData: {
				status: true
			} as formData,
			defaultList: [] as any,
			rules: {
				appName: [{ required: true, message: proxy?.$t("api_form.rule.appname") }],
				expireTime: [{ required: true, message: proxy?.$t("api_form.rule.expiretime") }]
			}
		});
		const treeFilter = ref();
		const refForm = ref();
		const Init = (row?: any) => {
			if (row) {
				getInfo(row.appId).then((res: any) => {
					if (res.result) {
						data.formData = res.result;
						// data.defaultList = res.result.apiList;
						data.formData.status = data.formData.status == 1 ? true : false;
						if (data.formData.expireTime == "2040-01-01 00:00:00") {
							data.formData.expireDay = "Y";
						} else {
							data.formData.expireDay = "y";
						}
					}
					data.boxShow = true;
				});
			} else {
				data.formData = {
					status: true,
					expireDay: "y"
				} as formData;
				data.defaultList = [];
				data.boxShow = true;
			}
		};
		// const dataCallback = (data: any) => {
		// 	return data;
		// };
		const handleFun = (fn: string, row?: any) => {
			console.log(row);
			switch (fn) {
				case "all":
					treeFilter.value.setCheckedNodes(treeFilter.value.treeData || treeFilter.value.treeAllData);
					break;
				case "clean":
					treeFilter.value.setCheckedKeys([]);
					break;
				case "commit":
					refForm.value!.validate(async (valid: any) => {
						if (!valid) return;
						// let list = treeFilter.value.getCheckedKeys();
						// data.formData.apiList = list.filter((el: any) => el.path);
						const param = deepClone(data.formData) as formData;
						param.status = param.status ? "1" : "0";
						if (param.appId) {
							editApp(param).then((res: any) => {
								if (res.code == ResultEnum.SUCCESS) {
									ElMessage.success(proxy?.$t("api_form.elmsg.edit"));
									props.getList?.();
									data.boxShow = false;
								} else {
									ElMessage.error(res.message || proxy?.$t("api_form.elmsg.fail"));
								}
							});
						} else {
							addApp(param).then((res: any) => {
								if (res.code == ResultEnum.SUCCESS) {
									ElMessage.success(proxy?.$t("api_form.elmsg.add"));
									props.getList?.();
									data.boxShow = false;
								} else {
									ElMessage.error(res.message || proxy?.$t("api_form.elmsg.fail"));
								}
							});
						}
					});
					break;
				case "timeChange":
					if (data.formData.expireDay == "Y") {
						data.formData.expireTime = "2040-01-01 00:00:00";
					} else {
						data.formData.expireTime = "";
					}

					break;
			}
		};
		// const disabledDate = (time: Date) => {
		// 	return time.getTime() < Date.now();
		// };
		expose({
			Init
		});
		const pickerOptions = ref([
			{
				text: "近一天",
				value: () => {
					const date = new Date();
					date.setTime(date.getTime() + 3600 * 1000 * 24);
					return date;
				}
			},
			{
				text: "近一周",
				value: () => {
					const date = new Date();
					date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
					return date;
				}
			},
			{
				text: "近一月",
				value: () => {
					const date = new Date();
					date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
					return date;
				}
			},
			{
				text: "近一年",
				value: () => {
					const date = new Date();
					date.setTime(date.getTime() + 3600 * 1000 * 24 * 365);
					return date;
				}
			}
		]);
		return () => {
			return h(
				<DialogBox
					v-model:visible={data.boxShow}
					title={data.formData.appId ? proxy?.$t("api_form.dialog_title.edit") : proxy?.$t("api_form.dialog_title.add")}
					width="650px"
					onConfirm={() => {
						handleFun("commit");
					}}
				>
					<ElForm ref={refForm} model={data.formData} labelWidth="100px" rules={data.rules}>
						<ElFormItem label={proxy?.$t("api_form.form_label.appname")} prop="appName">
							<ElInput v-model={data.formData.appName} />
						</ElFormItem>
						<ElFormItem label={proxy?.$t("api_form.form_label.expiretime")} prop="expireTime">
							<ElRadioGroup
								v-model={data.formData.expireDay}
								onChange={() => {
									handleFun("timeChange");
								}}
							>
								<ElRadioButton label="y">{proxy?.$t("api_form.radio_btn.y")}</ElRadioButton>
								<ElRadioButton label="Y">{proxy?.$t("api_form.radio_btn.forever")}</ElRadioButton>
							</ElRadioGroup>
							{data.formData.expireDay == "y" ? (
								<el-date-picker
									v-model={data.formData.expireTime}
									align="right"
									type="date"
									placeholder="选择日期"
									shortcuts={pickerOptions.value}
									value-format="YYYY-MM-DD 00:00:00"
								></el-date-picker>
							) : (
								""
							)}
						</ElFormItem>
						<ElFormItem label={proxy?.$t("api_form.form_label.status")}>
							<ElSwitch v-model={data.formData.status} />
						</ElFormItem>
						{/* <ElFormItem label="API权限">
							{{
								label: () => {
									return h(
										<div>
											<div class="text-center">API权限</div>
											<el-link
												type="primary"
												onClick={() => {
													handleFun("all");
												}}
											>
												全选
											</el-link>
											<span class="p-1">|</span>
											<el-link
												type="primary"
												onClick={() => {
													handleFun("clean");
												}}
											>
												取消
											</el-link>
										</div>
									);
								},
								default: () => {
									return (
										<TreeFilter
											ref={treeFilter}
											class="h-96 w-full border mt-4"
											multiple
											requestApi={getTree}
											id="path"
											isFilter={false}
											label="name"
											dataCallback={dataCallback}
											defaultValue={data.defaultList}
											isCheckStrictly={data.menusStrictly}
											onTreeRefMounted={() => {
												data.menusStrictly = false;
											}}
										/>
									);
								}
							}}
						</ElFormItem> */}
					</ElForm>
				</DialogBox>
			);
		};
	}
});
interface formData {
	appId?: string;
	appName: string;
	expireTime: string | Date | any;
	expireDay: string | Date | any;
	status: boolean | number | string;
	apiList: string[];
}
export default Form;
